<template>
  <div style="width:100%">
    <!-- 认证后并有应用展示的页面 -->
    <div class="home" v-if="loginList.has_auth == '2'">
      <div class="box1" style="margin-top: 0">
        <el-row :gutter="15">
          <el-col :md="24">
            <el-card class="box-card box1-left" style="padding:20px 40px 0">
              <div class="little">
                <p>企业信息</p>
                <p @click="enterpriseClick">详情</p>
              </div>
              <div class="message">
                <el-col :md="8">
                  <div class="grid-content bg-purple" id="col">
                    <div class="info-name">账<span style="color: transparent;">账号</span>号:</div>
                    <div class="indo-info">
                      <span>{{ companys.account }}</span>
                      <img src="@/assets/images/console/renzheng.png" alt="" />
                      <a>完成认证</a>
                    </div>
                  </div>
                </el-col>
                <el-col :md="8">
                  <div class="grid-content bg-purple-light">
                    <div class="info-name">法人姓名:</div>
                    <div class="indo-info">{{ companyList.legal_person }}</div>
                  </div>
                </el-col>
                <el-col :md="8">
                  <div class="grid-content bg-purple">
                    <div class="info-name">接收短信手机号:</div>
                    <div class="indo-info">{{ companyList.legal_person_phone }}</div>
                  </div>
                </el-col>
                <el-col :md="8">
                  <div class="grid-content bg-purple-light">
                    <div class="info-name">企业名称:</div>
                    <div class="indo-info">{{ companyList.company_name }}</div>
                  </div>
                </el-col>
                <el-col :md="8">
                  <div class="grid-content bg-purple-light">
                    <div class="info-name">电子邮箱:</div>
                    <div class="indo-info">{{ companys.email }}</div>
                  </div>
                </el-col>
                <el-col :md="8">
                  <div class="grid-content bg-purple-light">
                    <div class="info-name">注册时间:</div>
                    <div class="info-info">
                      {{ companyList.create_time }}
                    </div>
                  </div>
                </el-col>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
      <div class="box1">
        <el-row :gutter="15">
          <el-col :md="16">
            <el-card class="box-card box1-left">
              <div class="little">
                <p>印章统计</p>
                <el-select v-model="app_idHome" v-if="showHome" placeholder="请选择应用类型" @change="getSelectHome(app_idHome)">
                  <el-option v-for="item in optionsAppid" :key="item.app_id" :label="item.name" :value="item.app_id"> </el-option>
                </el-select>
              </div>
              <common-echarts v-show="showHome" style="height:250px" :chartData="echartData.seal" :isAxisChart="true"></common-echarts>
              <div style="text-align:center;width:220px;margin:20px auto" v-show="!showHome">
                <img style="width:100%" src="@/assets/images/console/nodata.png" />
              </div>
            </el-card>
          </el-col>
          <el-col :md="8">
            <el-card class="box-card box1-left">
              <div class="little">
                <p>账户余额</p>
              </div>
              <div class="money" style="height:270px">
                <h5>0元</h5>
                <el-button class="but" type="success">充值</el-button>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
      <div class="box1" style="padding-bottom: 20px">
        <el-row :gutter="15">
          <el-col :md="12">
            <el-card class="box-card box1-left">
              <div class="little">
                <p>用户统计</p>
              </div>
              <common-echarts v-show="showHome" style="height:265px" :chartData="echartData.user" :isAxisChart="true"></common-echarts>
              <div style="text-align:center;width:220px;margin:20px auto" v-show="!showHome">
                <img style="width:100%" src="@/assets/images/console/nodata.png" />
              </div>
            </el-card>
          </el-col>
          <el-col :md="12">
            <el-card class="box-card box1-left">
              <div class="little">
                <p>签章统计</p>
              </div>
              <common-echarts v-show="showHome" style="height:265px" :chartData="echartData.signature" :isAxisChart="false"></common-echarts>
              <div style="text-align:center;width:220px;margin:20px auto" v-show="!showHome">
                <img style="width:100%" src="@/assets/images/console/nodata.png" />
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- 认证前 -->
    <common-enterprise v-else style="width:100%" />
  </div>
</template>
<script>
import { mapState } from 'vuex'
import CommonEcharts from '../../../../common/comonEchart'
import CommonEnterprise from '../enterprise/Enterprise'
export default {
  name: 'consoleHome',
  components: {
    CommonEcharts,
    CommonEnterprise
  },
  data() {
    return {
      echartData: {
        seal: {
          xData: [], // x轴数据
          series: [
            {
              data: [],
              type: 'line',
              areaStyle: {
                color: '#6DDBB3', //改变区域颜色
                opacity: 0.3
              }
            }
          ]
        },
        user: {
          xData: [], // x轴数据
          series: [
            {
              name: '个人用户',
              type: 'line',
              stack: '总量',
              areaStyle: {
                color: '#6DDBB3', //改变区域颜色
                opacity: 0.3
              },
              data: []
            },
            {
              name: '企业用户',
              type: 'line',
              stack: '总量',
              areaStyle: {
                color: '#6A9AFA', //改变区域颜色
                opacity: 0.3
              },
              data: []
            }
          ]
        },
        signature: {
          series: {
            type: 'pie',
            data: [
              { value: '', name: '近一周' },
              { value: '', name: '近一月' },
              { value: '', name: '近一年' }
            ]
          }
        }
      },
      // 获取用户的appid
      app_idHome: '',
      optionsAppid: [],
      // 企业信息
      companys: {},
      companyList: {},
      // 展示和隐藏首页部分组件
      showHome: false
    }
  },
  methods: {
    // 跳转未认证页面
    enterpriseClick() {
      this.$router.push('/console/enterprise')
    },
    //获取用户Id
    async addId() {
      const data = await this.http.get(`/web/app/appId?access_token=${this.token}&userId=${this.userid}`)
      // console.log(data)
      if (data.result_code == '0') {
        this.optionsAppid = data.data.app
        this.app_idHome = this.optionsAppid[0].app_id
        this.getSelectHome()
        if (this.optionsAppid.length !== 0) {
          this.showHome = true
        } else {
          this.showHome = false
        }
      }
    },
    // 获取图表数据
    async getSelectHome(e = '') {
      // 获取签章统计数据
      const idx = {
        app_id: e || this.app_idHome
      }
      const idxx = JSON.stringify(idx)
      const data = await this.http.post(`/web/home/sign_count?access_token=${this.token}`, idxx)
      // console.log(data.data.sign_count)
      const sign_count = data.data.sign_count
      this.echartData.signature.series.data[0].value = sign_count.weekNum
      this.echartData.signature.series.data[1].value = sign_count.monthNum
      this.echartData.signature.series.data[2].value = sign_count.yearNum
      // 获取首页印章统计折线表
      const seal = {
        app_id: this.app_idHome,
        begin_time: '2020-01',
        end_time: '2020-07'
      }
      const seals = JSON.stringify(seal)
      const sealData = await this.http.post(`/web/home/seal_count?access_token=${this.token}`, seals)
      // console.log(sealData.data.seal_count)
      const seald = sealData.data.seal_count
      this.echartData.seal.xData = []
      this.echartData.seal.series[0].data = []
      for (let i in seald) {
        this.echartData.seal.xData.push(i) // 值
        this.echartData.seal.series[0].data.push(seald[i]) // 键
      }

      // 获取用户统计折线表
      const user = {
        app_id: this.app_idHome,
        begin_time: '2020-01',
        end_time: '2020-07'
      }
      const users = JSON.stringify(user)
      const userData = await this.http.post(`/web/home/user_count?access_token=${this.token}`, users)
      // console.log(userData)
      const userd = userData.data.user_company_count
      this.echartData.user.xData = []
      Object.keys(userd).forEach(v => {
        // console.log(v) //取到了key
        this.echartData.user.xData.push(v)
      })
      this.echartData.user.series[0].data = []
      this.echartData.user.series[1].data = []
      for (let i in userd) {
        this.echartData.user.series[0].data.push(userd[i])
      }
      for (let i in userData.data.user_personal_count) {
        this.echartData.user.series[1].data.push(userData.data.user_personal_count[i])
      }
    }
  },
  created() {
    this.addId()
  },
  computed: {
    ...mapState({
      userid: modules => modules.login.loginList.developer_id,
      token: modules => modules.login.loginList.token,
      company: modules => modules.login.company,
      loginList: modules => modules.login.loginList
    })
  },
  async mounted() {
    const appid = {
      developer_id: this.userid
    }
    const idx = JSON.stringify(appid)
    const data = await this.http.post(`/web/home/company/info?access_token=${this.token}`, idx)
    // console.log(data.data)
    // console.log(this.userid)
    if (data.result_code == '0') {
      this.companys = data.data
      if (data.data.authentication_type == '0') {
        // 法人
        this.companyList = data.data.developer_legal_auth_res
      } else if (data.data.authentication_type == '1') {
        // 经办人
        this.companyList = data.data.developer_charge_auth_res
      }
      this.$store.commit('getCompanyList', data.data)
    }
  }
}
</script>
<style scoped lang="scss">
/deep/.el-dialog__title {
  color: #fff;
}
/deep/.el-card__body {
  padding: 0;
}
.home {
  width: 100%;
  height: 100%;
  border-radius: 6px;
  .box1 {
    .message {
      padding: 20px;
      .grid-content {
        display: flex;
        align-items: center;
        font-size: 18px;
        font-weight: 300;
        letter-spacing: 1px;
        margin-bottom: 20px;
        .info-name {
          color: #a8a8a8;
          margin-right: 10px;
        }
        .indo-info {
          color: rgba(102, 102, 102, 1);
          img {
            width: 22px;
            height: 22px;
            position: absolute;
          }
          a {
            display: inline-block;
            margin-left: 22px;
          }
        }
      }
    }
  }

  .box1 {
    margin-top: 15px;
    .box1-left {
      padding: 20px 40px 5px;
      .little {
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #f0f0f0;
        padding-bottom: 12px;
        p:nth-child(1) {
          font-size: 20px;
          color: rgba(51, 51, 51, 1);
          letter-spacing: 1px;
          position: relative;
          padding-left: 15px;
          &::before {
            content: '';
            height: 20px;
            width: 2px;
            background: #3dc07b;
            position: absolute;
            left: -0%;
            top: 0;
          }
        }
        p:nth-child(2) {
          font-size: 18px;
          color: rgba(153, 153, 153, 1);
          letter-spacing: 1px;
          cursor: pointer;
          &:hover {
            color: #3dc07b;
          }
        }
      }
      .money {
        text-align: center;
        align-items: center;
        padding: 30px 0 0;
        h5 {
          font-size: 40px;
          color: rgba(35, 183, 105, 1);
          line-height: 60px;
          letter-spacing: 2px;
          margin-bottom: 50px;
        }
        /deep/.el-button {
          font-size: 18px;
          font-weight: 500;
          color: rgba(255, 255, 255, 1);
          line-height: 27px;
          letter-spacing: 1px;
          background: rgba(35, 183, 105, 1);
          padding: 7px 35px;
        }
      }
    }
  }
}
</style>
